 <template>
  <div>
    <SeachHead class="header">
      <div class="head" slot="left">
        <img src="@/assets/right (1).png" alt="" @click="fh" />
        <span>{{ this.n }}{{ this.m }}{{ this.d }}</span>
        <span @click="fh">切换城市</span>
      </div>
    </SeachHead>
    <main>
      <div class="m-top">
        <div class="m-seach">
          <input
            type="text"
            placeholder="输入学校，商务楼，地址"
            v-model="msg"
            @input="sea()"
          />
          <span class="x" v-show="$store.state.b" @click="del2">X</span>
          <p @click="submit">提交</p>
          <div class="jl" v-show="$store.state.bool">
            <div class="jl-p">
              <span>保存的数据</span><span @click="del">X</span>
            </div>
            <div class="jl-d" v-for="(i, index) in loc" :key="index">
              {{ i }}
            </div>
          </div>
        </div>
        <span class="ls">搜索历史</span>
      </div>
      <ul class="list" v-if="f">
        <li
          v-for="(item, index) in $store.state.arr"
          :key="index"
          @click="xq(item)"
        >
          <p>{{ item.name }}</p>
          <p>{{ item.address }}</p>
        </li>
      </ul>
      <ul class="list" v-else>
        <li v-for="(item, index) in unique(jk)" :key="index" @click="xq(item)">
          <p>{{ item.name }}</p>
          <p>{{ item.address }}</p>
        </li>
        <p class="del" @click="qk()" v-show="jk.length > 0">清空所有</p>
      </ul>
    </main>
  </div>
</template>
 <script src="static/rem.js"></script>
 <script>
import { getseach } from "@/api/index.js";
import SeachHead from "@/components/Cityheader.vue";
export default {
  components: {
    SeachHead,
  },
  data() {
    return {
      n: "",
      m: "",
      id: "",
      msg: "",
      arr: "",
      arrnew: [],
      a: [],
      loc: "",
      d: "",
      f: false,
      arr3: "",
      jk: [],
    };
  },
  methods: {
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.name) && res.set(arr.name, 1));
    },
    sea() {
      this.$store.commit("sea", this.msg);
    },
    im() {
      this.$router.push("./");
    },
    async submit() {
      //搜索城市部分
      this.f = true;
      // this.id = this.$route.query.id;
      if (this.msg) {
        var seach = await getseach(this.$route.query.id, this.msg);
        this.a.push(this.msg);
        this.$store.commit("submit", { r: seach.data, h: this.a });
      }
    },
    xq(item) {
      this.$router.push({ path: "/SearchHistory", query: { i: item } });
      this.$store.commit("xq", item);
    },
    fh() {
      this.$router.push("/");
    },
    del() {
      this.$store.state.bool = false;
    },
    del2() {
      this.msg = "";
      this.$store.state.b = false;
    },
    qk() {
      this.jk = [];
      this.$store.commit("qk");
    },
  },
  mounted() {
    this.jk = this.$store.state.arr6;
    this.loc = JSON.parse(localStorage.getItem("user"));
    this.n = this.$route.query.m;
    this.m = this.$route.query.h;
    this.d = this.$route.query.d;
  },
  computed: {},
};
</script>
 <style lang='css' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 3rem;
  background: #2f90e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem;
}
.head img {
  width: 1.5rem;
  height: 1.5rem;
}
.head span:nth-of-type(1) {
  font-weight: 700;
  color: #ffffff;
}
.head span:nth-of-type(2) {
  color: #ffffff;
}
main {
  flex: 1;
  background: #f5f5f5;
  overflow-y: auto;
}
.m-top {
  width: 100%;
  height: 7.5rem;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}
.m-seach {
  width: 100%;
  height: 5.5rem;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0rem;
}
.m-seach input {
  width: 20rem;
  height: 2rem;
  border: 1px solid #e4e4e4;
  padding-left: 0.6rem;
  box-sizing: border-box;
  outline: none;
}
.m-seach p {
  margin-top: 1rem;
  width: 20rem;
  height: 2rem;
  background: #3190e8;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ls {
  color: #000;
  padding-left: 1rem;
  font-size: 14px;
}
.list {
  display: flex;
  flex-direction: column;
  background: #ffff;
}
.list li {
  width: 100%;
  height: 4rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e4e4e4;
  padding: 0.3rem 0rem 0rem 1rem;
}
.list li p:nth-of-type(1) {
  font-size: 15px;
}
.list li p:nth-of-type(2) {
  font-size: 13px;
  color: #ccc;
  margin-top: 5px;
}
.jl {
  position: fixed;
  width: 20rem;
  height: auto;
  background: #ffffff;
  top: 100px;
}
.jl-p {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jl-p span {
  font-size: 14px;
  color: #6c6c6c;
}
.x {
  color: #6c6c6c;
  position: fixed;
  right: 40px;
  top: 75px;
}
.del {
  margin-left: 150px;
  margin-top: 10px;
}
</style>